<template>
  <div class="menu-box">
    <div class="index-box">
      <SubMenu @menuClick="menuClick" :tabdata="tabdatas"></SubMenu>
    </div>
    <div class="right-box">
      <div class="tab-box">
        <a-tabs
          v-model:activeKey="activeKey"
          :tab-position="mode"
          type="editable-card"
          @tabScroll="callback"
          @edit="onEdit"
        >
          <a-tab-pane
            v-for="pane in tabdatas"
            :key="pane.key"
            :tab="pane.title"
            :closable="pane.closable"
          >
            <!-- {{ pane.content }} -->
            <component :is="pane.content"></component>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import SubMenu from "./components/menu.vue";
import { ref, watchEffect, defineAsyncComponent, shallowReactive } from "vue";
import type { TabsProps } from "ant-design-vue";
const mode = ref<TabsProps["tabPosition"]>("top");
console.log(import("@/views/pcDocument/table/index.vue"));

const activeKey = ref("table");

const tabdatas: any = ref([
  {
    content: defineAsyncComponent(() => {
      return import("@/views/pcDocument/table/index.vue");
    }),
    key: "table",
    title: "表格",
  },
]);
const menuClick = (item: any, keys: any) => {
  tabdatas.value = item;
  activeKey.value = keys;
};
const callback: TabsProps["onTabScroll"] = (val) => {
  console.log(val);
};
const onEdit = (targetKey: string | MouseEvent, action: string) => {
  // console.log(targetKey, action);

  if (action === "remove") {
    removeTab(targetKey as string);
  }
};
const removeTab = (targetKey: string) => {
  let lastIndex = 0;
  tabdatas.value.forEach((pane: any, i: number) => {
    if (pane.key === targetKey) {
      lastIndex = i - 1;
    }
  });
  tabdatas.value = tabdatas.value.filter((pane: any) => pane.key !== targetKey);
  // console.log(tabdatas.value);

  if (tabdatas.value.length && activeKey.value === targetKey) {
    if (lastIndex >= 0) {
      activeKey.value = tabdatas.value[lastIndex].key;
    } else {
      activeKey.value = tabdatas.value[0].key;
    }
  }
};
watchEffect(() => {
  console.log(tabdatas.value);
});
</script>

<style lang="scss" scoped>
.menu-box {
  width: 100%;
  height: 100%;
  display: flex;
  .right-box {
    flex: 1;
    .tab-box {
      width: 100%;
      height: 100%;
      position: relative;
      ::v-deep .ant-tabs {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      ::v-deep .ant-tabs-tab-btn {
        transition: none;
      }
      ::v-deep .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap {
        height: 52px;
        line-height: 52px;
        display: flex;
        align-items: center;
        background: #fff;
      }
      ::v-deep .ant-tabs-tab {
        padding: 0px 10px;
        height: 32px;
        line-height: 32px;
        background: #f7f7f7;
        border-color: #dddddd;
        margin: 0px 0px 0px 10px;
      }
      ::v-deep .ant-tabs-tab:hover {
        color: #ffffff;
        background: #1677ff !important;
        .ant-tabs-tab-remove {
          color: #ffffff;
        }
      }
      ::v-deep
        .ant-tabs-card.ant-tabs-top
        > .ant-tabs-nav
        .ant-tabs-tab-active {
        background: #1677ff;
        .ant-tabs-tab-btn {
          color: #ffffff;
        }
        .ant-tabs-tab-remove {
          color: #ffffff;
        }
      }
      ::v-deep .ant-tabs-nav-add {
        display: none;
      }
    }
  }
}
</style>
<style lang="scss">
.ant-tabs-dropdown-menu-item {
  min-width: auto;
}
.ant-tabs-dropdown-menu-item:hover {
  background-color: #1677ff;
  color: #fff;
  .ant-tabs-dropdown-menu-item-remove {
    color: #fff;
  }
}
</style>
